<template>
  <div class="indicator">
    <el-button @click="rotate(90)" size="small">顺时针旋转90°</el-button>
    <el-button @click="rotate(-90)" size="small">逆时针旋转90°</el-button>
    <el-button @click="rotate(1)" size="small">顺时针旋转1°</el-button>
    <el-button @click="rotate(-1)" size="small">逆时针旋转1°</el-button>
    <el-icon @click="scale(0.1)">
      <svg
        viewBox="0 0 1024 1024"
        xmlns="http://www.w3.org/2000/svg"
        data-v-ea893728=""
      >
        <path
          fill="currentColor"
          d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704zm-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96z"
        ></path>
      </svg>
    </el-icon>
    <el-icon @click="scale(-0.1)">
      <svg
        viewBox="0 0 1024 1024"
        xmlns="http://www.w3.org/2000/svg"
        data-v-ea893728=""
      >
        <path
          fill="currentColor"
          d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704zM352 448h256a32 32 0 0 1 0 64H352a32 32 0 0 1 0-64z"
        ></path>
      </svg>
    </el-icon>
    <el-button @click="reset" size="small">重置</el-button>
    <el-button :disabled="!draggable" @click="drawStart" size="small"
      >框选</el-button
    >
    <el-button :disabled="draggable" @click="moveStart" size="small"
      >移动</el-button
    >
    <el-button @click="addHighlightArea" size="small">框选某道题</el-button>
  </div>
</template>
<script lang="ts">
export default {
  name: 'indicator-bar',
  props: {
    draggable: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    rotate(angle: number) {
      this.$emit('rotate', angle)
    },
    scale(scale: number) {
      this.$emit('zoom', scale)
    },
    reset() {
      this.$emit('reset')
    },
    drawStart() {
      this.$emit('drawStart')
    },
    moveStart() {
      this.$emit('moveStart')
    },
    addHighlightArea() {
      this.$emit('addHighlightArea', {
        x: 60,
        y: 740,
        width: 1520,
        height: 548,
        padding: 10,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background-color: #fff;
  .el-icon {
    cursor: pointer;
    font-size: 30px;
    padding: 10px;
    box-sizing: content-box;
  }
}

.pre-container {
  width: 100%;
  height: calc(100vh - 100px - 50px);
  background-color: aquamarine;
  position: relative;
  overflow: hidden;
  .frame {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: rgba($color: #000000, $alpha: 0.1);
    transform-origin: 50% 50%;
    transform: scale(1) rotate(0deg);
  }
}
</style>
